<template>
  <div style="margin: 20px 0">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当日营业额</span>
          </div>
          <div class="text item">
            <div class="order" v-html="tran(queryName.totalTurnoverDay)" />
            <div class="contrast">
              <div class="left"> 周同比 <img src="@/assets/image/upper.png" alt=""> 12%</div>
              <div class="right"> 日环比 <img src="@/assets/image/lower.png" alt=""> 11%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当日套餐销售</span>
          </div>
          <div class="text item">
            <div class="order" v-html="tran(queryName.totalPackageNumDay)" />
            <div id="meal1" class="contrast" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当日订单数量</span>
          </div>
          <div class="text item">
            <div class="order" v-html="tran(queryName.totalOrderNumDay)" />
            <div id="order1" class="contrast" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>企业数量</span>
          </div>
          <div class="text item">
            <div class="order" />
            <div class="syl-contrast" v-html="tran(queryName.totalCompanyNum)" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Index',
  props: ['queryNameValue'],
  data() {
    return {
      type: 1,
      typeName: 1,
      dateRange: [],
      dateRange1: [],
      date: [],
      open: false,
      // 非多个禁用
      multiple: true,
      form: {},
      // 门店id
      queryNames: {
        name: '',
        totalOrder: '',
        setMeal: '',
        order: '',
        storeId: null
      },
      queryName: this.queryNameValue,
      rules: {}
    }
  },
  watch: {
    queryNameValue(n, o) {
      // 箭头函数  不然会发生this改变
      this.queryName = n
    }
  },
  mounted() {
    this.getMeal()
    this.getOrder()
  },
  methods: {
    /** 套餐 **/
    getMeal() {
      // 基于准备好的dom，初始化echarts实例
      const myChar = this.$echarts.init(document.getElementById('meal1'))
      // 绘制图表
      myChar.setOption({
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross',
        //     label: {
        //       backgroundColor: '#6a7985'
        //     }
        //   }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: '85%', // 宽度
          height: '76%', // 高度
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
              formatter: function() {
                return ''
              }
            },
            axisLine: { // y轴
              show: false
            },
            axisTick: { // y轴刻度线
              show: false
            },
            splitLine: { // 网格线
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: function() {
                return ''
              }
            },
            axisLine: { // y轴
              show: false
            },
            axisTick: { // y轴刻度线
              show: false
            },
            splitLine: { // 网格线
              show: false
            }
          }
        ],
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            symbol: 'none', // 去掉折线图中的节点
            smooth: true, // true 为平滑曲线，false为直线
            areaStyle: {}
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          myChar.resize()
        })
      }, 200)
    },
    /** 订单 **/
    getOrder() {
      // 基于准备好的dom，初始化echarts实例
      const myChar = this.$echarts.init(document.getElementById('order1'))
      myChar.setOption({
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross',
        //     label: {
        //       backgroundColor: '#6a7985'
        //     }
        //   }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: '85%', // 宽度
          height: '76%', // 高度
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            formatter: function() {
              return ''
            }
          },
          axisLine: { // y轴
            show: false
          },
          axisTick: { // y轴刻度线
            show: false
          },
          splitLine: { // 网格线
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function() {
              return ''
            }
          },
          axisLine: { // y轴
            show: false
          },
          axisTick: { // y轴刻度线
            show: false
          },
          splitLine: { // 网格线
            show: false
          }
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          myChar.resize()
        })
      }, 200)
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}

.box-card {
  width: 100%;

  .text {
    font-size: 14px;

    .order {
      width: 100%;
      height: 40px;
      text-align: left;
      line-height: 40px;
      font-size: 22px;
      font-weight: 600;
    }

    .contrast {
      width: 100%;
      height: 120px;
      line-height: 190px;
      display: flex;
      font-size: 14px;

      .left {
        width: 50%;
        height: 50px;
        text-align: center;
      }

      .right {
        width: 50%;
        height: 50px;
        text-align: center;
      }

      img {
        width: 16px;
      }
    }
  }

  .item {
    margin-bottom: 18px;
  }
}

.month {
  margin-top: 20px;
  width: 100%;

  .active {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .ordering {
    width: 100%;
    margin: 20px 0;
    height: 260px;
  }
}

.export {
  width: 100%;
  height: 60px;
  line-height: 60px;

  h3 {
    margin: 0;
    padding: 0;
  }
}

.syl-contrast {
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}

</style>
